<template >
  <div class="main">
    <div class="container">
      <Usercenter class="userinfo"></Usercenter>
      <div class="list">
        <div>我的订单</div>
        <div class="orders">
          <el-table
            :data="list"
            stripe
            style="width: 100%"
            empty-text="您还没有支付过任何订单~"
          >
            <el-table-column prop="trade_no" label="订单号" width="250">
            </el-table-column>
            <el-table-column prop="startDate" label="开通时间" width="180">
            </el-table-column>
            <el-table-column prop="orderItemName" label="会员类型" width="120">
            </el-table-column>
            <el-table-column prop="validMonth" label="有效期">
              <template slot-scope="scope">
                {{ scope.row.validMonth }}个月
              </template>
            </el-table-column>
            <el-table-column prop="total_fee" label="支付金额(元)">
              <template slot-scope="scope">
                {{ scope.row.total_fee / 100 }}
              </template>
            </el-table-column>
            <el-table-column prop="pay_platform" label="支付方式">
              <template slot-scope="scope">
                {{ scope.row.pay_platform == 0 ? "微信" : "支付宝" }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page-view" v-show="list.length">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size.sync="params.pageSize"
            :current-page.sync="params.page"
            :total="total"
            @current-change="pageChange"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Usercenter from "@/components/usercenter.vue";
import { getOrderList } from "@/api/user.js";

export default {
  components: { Usercenter },
  data() {
    return {
      list: [],
      total: 0,
      params: {
        page: 1,
        pageSize: 10,
      },
    };
  },
  head() {
    return {
      title: "我的订单-个人中心",
    };
  },
  created() {
    if (process.client) {
      this.getData();
    }
  },
  methods: {
    getData() {
      getOrderList(this.params).then((res) => {
        console.log(res);
        this.list = res.data.items;
        this.total = res.data.count;
      });
    },
    pageChange() {
      this.params.page = page;
      this.getData();
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 20px 0;
}

.container {
  width: 100%;
  max-width: 1250px;
  display: flex;
}

.userinfo {
  width: 260px;
  background: white;
  margin-right: 20px;
}

.list {
  width: calc(100% - 280px);
  background: white;
  padding: 20px;
  font-size: 16px;
  min-height: 50px;
  font-weight: 700;
  background-color: #fff;
  color: #333;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.orders {
  margin-top: 30px;
  width: 100%;
}
.page-view {
  margin-top: 20px;
}
</style>